<template>
    <div>
          <el-table
            :data="tableData"
            :border="border"
            :height="height"
            :stripe="stripe"
            style="width: 100%">
                <el-table-column
                    align="center"
                    v-for="(item , index) in headData"
                    :prop="item.prop"
                    :label="item.label"
                    :key="index"
                    :width="item.width">
                    <!-- 我们将每个单元格都是插槽 -->
                    <template slot-scope="{$index,row}">
                        <div v-if="!item.slot">
                            {{tableData[$index][item.prop]}}
                        </div>
                        <div v-if="item.slot">
                            <!-- row 父组件插槽接收的名= "传给父组件插槽的数据" -->
                            <slot :name="item.prop" v-bind:row="row"></slot>
                        </div>
                    </template>
                </el-table-column>
                 <el-table-column
                    fixed="right"
                    v-if="isoperation"
                    width="150px"
                    align="center"
                    label="操作">
                    <template slot-scope="{row,$index}">
                        <slot name="operation" v-bind:row="{item:row,index:$index}"></slot>
                    </template>
                </el-table-column>
        </el-table>
        <div>
            <el-pagination
            class="pagination"
            v-if="ispagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage+1"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            layout="total,prev, pager, next, sizes"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'eveningStar',
    data() {
        return {
            
        }
    },
     props:{
        // 表格数据的名字
        tableData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        // 表头的数据
        headData:{
            type:Array,
            default:()=>{
                return []
            }
        },
        // 是否展示操作
        isoperation:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 是否展示分页
        ispagination:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 是否斑马纹
        stripe:{
            type:Boolean,
            default:()=>{
                return false
            }
        },
        // 是否边框
        border:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 固定表格头部
        height:{
            type:String,
            default:()=>{
                return 'fit-content'
            }
        },
        // 当前第几页
        currentpage:{
            type:Number,
            default:()=>{
                return 1
            }
        },
        // 切换一页多少条数据的选项
        pagesizes:{
            type:Array,
            default:()=>{
                return [10,20,30,40,50]
            }
        },
        // 一页几条
        pagesize:{
            type:Number,
            default:()=>{
                return 10
            }
        },
        // 总条数
        total:{
            type:Number,
            default:()=>{
                return 0
            }
        }
    },
    methods:{
        handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        let _self = this;
        _self.$emit("SizeChange" , val)
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        let _self = this;
        _self.$emit("CurrentChange" , val)
      }
    }
}

</script>
<style lang="less">
    // .el-table{
    //     max-height: 500px!important;
    // }
    .el-table .cell{
        font-weight: bold!important;
        font-size: 12px!important;
    }
    .el-table__body .cell>div{
      font-weight: normal!important;
      padding: 0 6px;
    }
    .el-table .cell:first-child{
        padding: 0!important;
    }
    .el-table .el-table__cell{
        padding: 0;
    }
    .el-table__row td{
        height: 62px!important;
    }
    .el-table__body-wrapper{
        // min-height: 62px!important;
        overflow-y:scroll;
        max-height: 500px!important;
        height: fit-content!important;
    }
    .pagination{
        margin-top: 8px;
    }
</style>